<template>
	<view class="logistics">
		<view class="address">
			<view class="address-l">
				<view class="ad1">收货地址</view>
				<view class="ad2">浙江省 杭州市 江干区 四季青街道迪凯城星国际3-2-2302</view>
			</view>
			<view class="address-r">
				<view class="ad1">王先生</view>
				<view class="ad2">18767150927</view>
			</view>
		</view>
		
		<view class="cont-top">
			<text class="color1">包裹1</text>
			<text>包裹2</text>
		</view>
		<view class="cont">
			<view class="cont-l">
				<image src="" mode="" class="img"></image>
			</view>
			<view class="cont-c">
				<view class="name">保暖防风加厚羽绒服</view>
				<view class="spec">黑色、180/100a(54)</view>
				<view class="price">
					<text class="price-l">¥90.0</text>
					<text class="price-r">X1</text>
				</view>
			</view>
		</view>
		<view class="log">
			<view class="log-l">
				<text class="color1">已发货</text>
				<text class="size34">天天快递</text>
			</view>
			<view class="log-r">
				<text class="color9">快递单号</text>
				<text>5201812051523</text>
			</view>
		</view>
		
		<view class="process">
			<view class="item active">
				<view class="item-l">
					<text>12月15日</text>
					<text>16:15</text>
				</view>
				<view class="item-c">
					<view class="line"></view>
					<view class="circle"></view>
				</view>
				<view class="item-r">
					<view class="color1">签收</view>
					<view>
						快件已签收，如有问题请联系业务员：吴润祥 【<text class="color1">17160680658</text>】。相逢是缘，如果你对我的服务感到
						满意，给个五星好评可否？【请在评价小件员处给
						予五星好评】。
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-l">
					<text>12月15日</text>
					<text>16:15</text>
				</view>
				<view class="item-c">
					<view class="line"></view>
					<view class="circle"></view>
				</view>
				<view class="item-r">
					<view>在途</view>
					<view>杭州市-杭州市【杭州市转运中心】，正在发往【杭州飞豹】。</view>
				</view>
			</view>
			<view class="item">
				<view class="item-l">
					<text>12月15日</text>
					<text>16:15</text>
				</view>
				<view class="item-c">
					<view class="line"></view>
					<view class="circle"></view>
				</view>
				<view class="item-r">
					<view>发货</view>
					<view>商家发货</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
		}
	}
</script>

<style>
.logistics {
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
	padding-bottom: 128upx;
}
.address {
	background-color: #fff;
	padding: 20upx 30upx;
	display: flex;
}
.address .address-l {
	width: 55%;
	margin-right: 20upx;
}
.address .address-r {
	text-align: right;
	flex: 1;
}
.address .address-l ,.address .address-r {
	overflow: hidden;
}
.address .ad1 {
	color: #333;
	height: 60upx;
}
.address .ad2 {
	color: #999999;
}
.address .btn {
	width: 100%;
	height: 60upx;
	background-color: #fff;
	color: #333;
	line-height: 54upx;
	font-size: 26upx;
	margin-top: 30upx;
	border: 1px solid #ccc;
}
uni-button:after {
	border: none;
}
.cont-top {
	background-color: #fff;
	margin-top: 20upx;
	line-height: 80upx;
	padding: 0 30upx;
}
.cont-top text {
	display: inline-block;
	width: 100upx;
}
.cont {
	display: flex;
	padding: 20upx 30upx;
	background-color: #fff;
}
.cont .cont-l {
	width: 150upx;
	height: 150upx;
	margin-right: 40upx;
}
.cont .cont-l .img {
	width: 100%;
	height: 100%;
	background-color: #A2A2A2;
}
.cont .cont-c {
	flex: 1;
}
.cont .name {
	font-size: 24upx;
	height: 50upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cont .spec {
	color: #666666;
	font-size: 22upx;
	margin-bottom: 5upx;
}
.cont .price-l {
	float: left;
	color: #2E2E2E;
	font-size: 30upx;
}
.cont .price-r {
	float: right;
	font-size: 22upx;
	color: #999999;
}
.log {
	width: 100%;
	display: flex;
	background-color: #fff;
	height: 140upx;
	padding: 30upx;
	font-size: 26upx;
}

.log .log-l, .log .log-r {
	flex: 1;
}
.log .log-r {
	text-align: right;
}
.log  text {
	display: block;
	height: 40upx;
}
.process {
	width: 100%;
	background-color: #fff;
	padding: 20upx 30upx;
	margin-top: 20upx;
}
.process .item {
	width: 100%;
	display: flex;
	color: #999;
}
.process .item.active {
	color: #333;
}
.process .item .item-l {
	width: 150upx;
	padding-top: 30upx;
}
.process .item .item-l text {
	display: block;
}
.process .item .item-c {
	width: 50upx;
	position: relative;
}
.process .item .item-c .line {
	width: 4upx;
	height: 100%;
	background-color: #A6A6A6;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.process .item .item-c .circle {
	width: 23upx;
	height: 23upx;
	border-radius: 100%;
	background-color:#A6A6A6;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 50upx
}
.process .item.active .item-c .circle {
	background-color: #F6576D;
}

.process .item .item-r {
	flex: 1;
	font-size: 22upx;
	line-height: 40upx;
	padding-bottom: 20upx;
}
.process .item .item-r>view:first-child {
	font-size: 26upx;
}
.process .item:first-child .line{
	top: 50upx;
}
.process .item:last-child .line{
	height: 50upx;
}
.process .item.isOne .line{
	height: 50upx;
	top: 0;
}
</style>
